<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="description" content="登陆"/>
  <title>登录</title>

  <meta charset="utf-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <script th:src="@{/js/jquery.min.js}"></script>
  <script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}"></script>
  <link rel="stylesheet" href="../static/css/jq22.css" th:href="@{/css/jq22.css}"/>
  <link rel="stylesheet" href="../static/css/jq22.css" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}"/>
</head>
<body>
<!-- begin -->
<div id="login" class="container-fluid">
  <div class="wrapper">
    <div class="login">
      <form action="#" method="post" class="container offset1 loginform">
        <div id="owl-login">
          <div class="hand"></div>
          <div class="hand hand-r"></div>
          <div class="arms">
            <div class="arm"></div>
            <div class="arm arm-r"></div>
          </div>
        </div>
        <div class="pad">
          <input type="hidden" name="_csrf" value="9IAtUxV2CatyxHiK2LxzOsT6wtBE6h8BpzOmk="/>
          <div class="control-group">
            <div class="controls">
              <label for="userName" class="control-label fa fa-envelope"></label>
              <input id="userName" type="text" name="email" placeholder="用户名" tabindex="1" autofocus="autofocus" class="form-control input-medium"/>
            </div>
          </div>
          <div class="control-group">
            <div class="controls">
              <label for="password" class="control-label fa fa-asterisk"></label>
              <input id="password" type="password" name="password" placeholder="密码" tabindex="2" class="form-control input-medium"/>
            </div>
          </div>
        </div>
        <div class="form-actions">
          <span id="msg" style="line-height: 30px; color: red" class="text-muted pull-left"></span>
          <!--<a href="#" tabindex="5" class="btn pull-left btn-link text-muted">忘 记 密 码 ？</a>-->
          <!--<a href="#" tabindex="6" class="btn btn-link text-muted">注   册</a>-->
          <button type="button" id="doLogin" tabindex="4" class="btn btn-primary">登   陆</button>
        </div>
      </form>
    </div>
  </div>
  <script>
    $(function () {
      $('#login #password').focus(function () {
        $('#owl-login').addClass('password');
      }).blur(function () {
        $('#owl-login').removeClass('password');
      });

      //简单登录操作
      $("#doLogin").click(function (e) {

        // 将json格式转换为字符串
        var loginObject = {
          username: $("#userName").val(),
          password: $("#password").val()
        };

        $.ajax({
          type: "POST",
          url: "/login",
          //contentType: "application/json",
          //data: JSON.stringify(loginObject),
          data: loginObject,
          dataType: "JSON",
          success: function (resp) {
            if (resp.success) {
              $("#msg").html("登陆成功");
              $("#msg").css("color","green");
              setTimeout(function() {
                window.location.href = "/list";
              }, 1000);
            } else {
              $("#msg").html(resp.errorMsg);
            }
          }
        });
      });
    });
  </script>
</div>
<!-- end -->
</body>
</html>